<!DOCTYPE html>
<html>
<head>
	<title>Athena HTML5 mobile game</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0">	
	<link rel="stylesheet" href="css/css.css" type="text/css" media="screen" />
	<link href="css/index.css" media="screen" rel="stylesheet" type="text/css">
	<script src="http://192.168.1.188:8000/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.1.js" ></script>
	<script type="text/javascript" src="js/game.js"></script>
	<script type="text/javascript" src="js/swfref.js"></script>
	<script type="text/javascript" >
		// Initialise the game
		init();
	</script>	
	<script type="text/javascript" src="js/js-athena.js"></script>
	<script type="text/javascript" src="js/processJson.js"></script>
	<script type="text/javascript" src="js/ulti.js"></script>
	<script type="text/javascript" src="js/game1.js"></script>
	<script type="text/javascript">
		function backLvl(){
			document.getElementById("wrapperLV").style.display="block";
			document.getElementById("wrapperPG").style.display="none";
			document.getElementById("wrapperSG").style.display="none";
		}
	</script>
</head>
<body>
	<div id="toolbar">
	    <ul id="status">
	        <li>Socket status: <span id="socketStatus">Conecting ...</span></li>
	        <li>IP: <?= $ip == '' ? 'all' : $ip . " <a href='?ip='>[all]</a>" ?>
	        <li>count: <span id="count">0</span></li>
	    </ul>
	</div>

<!-- FRAME 1 -->
	<div id="wrapperLV" class="wrapper">
		<div id="header">
			<div id="logo">
				<img alt="Athena-Tá Lả" src="image/lgo 3 cay.png" id="imgLogo">
				<input type="button" value="Chọn Game" id="btnSG">
			</div>
			<div id="news">
				<div id="hots">Tin Nóng</div>
				<div id="infoNew">
					<div id="ctNew">abc</div>
				</div>
			</div>
		</div>
		<div id="content">
			<div id="ctLeft">
				<div id="navigation">
					<ul>
						<li>CAO THỦ</li>
						<li>TIN TỨC</li>
						<li>ĐẠI GIA</li>
						<li>CHUYỂN AG</li>
					</ul>
				</div>
				<div id="infoOption">
					<table id="tblInfoPlayer" cellspacing='0'  border='0' cellpadding='0'>
						<thead>
					    	<tr>
					    		<th scope="col">STT</th>
					        	<th scope="col">CAO THỦ</th>
					            <th scope="col">THÀNH TÍCH</th>
					            <th scope="col">ĐIỂM</th>
					        </tr>
					    </thead>
					    <tbody>
					    	<tr>
					    		<td>1.</td>
					    		<td>Tidus4488</td>
					    		<td>100.000.000 AG</td>
					    		<td>999</td>
					    	</tr>
					    	<tr>
					    		<td>2.</td>
					    		<td>Tomama</td>
					    		<td>10.000.000 AG</td>
					    		<td>555</td>
					    	</tr>
					    	<tr>
					    		<td>3.</td>
					    		<td>Tidus4488</td>
					    		<td>100.000.000 AG</td>
					    		<td>999</td>
					    	</tr>
					    	<tr>
					    		<td>4.</td>
					    		<td>Tomama</td>
					    		<td>10.000.000 AG</td>
					    		<td>555</td>
					    	</tr>
					    	<tr>
					    		<td>5.</td>
					    		<td>Tidus4488</td>
					    		<td>100.000.000 AG</td>
					    		<td>999</td>
					    	</tr>
					    	<tr>
					    		<td>6.</td>
					    		<td>Tomama</td>
					    		<td>10.000.000 AG</td>
					    		<td>555</td>
					    	</tr>
					    	<tr>
					    		<td>7.</td>
					    		<td>Tidus4488</td>
					    		<td>100.000.000 AG</td>
					    		<td>999</td>
					    	</tr>
					    	<tr>
					    		<td>8.</td>
					    		<td>Tomama</td>
					    		<td>10.000.000 AG</td>
					    		<td>555</td>
					    	</tr>
					    	<tr>
					    		<td>9.</td>
					    		<td>Tidus4488</td>
					    		<td>100.000.000 AG</td>
					    		<td>999</td>
					    	</tr>
					    	<tr>
					    		<td>10.</td>
					    		<td>Tomama</td>
					    		<td>10.000.000 AG</td>
					    		<td>555</td>
					    	</tr>
					    </tbody>
				    </table>
				</div>
			</div>
			<div id="ctRight">
				<div id="btnLvl"></div>
				<div id="infoPlayer">
					<ul>
						<li id="namePlayer"></li>
						<li id="agPlayer"></li>
						<li id="buyAG"><input type="button" value="Nạp AG" id="btnBuyAG"></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	
<!-- FRAME 2 -->
	<div class="wrapper" id="wrapperSG">
		<div id="contentLeft">
			<div id="selectDep"></div>
			<div class="selectGame" id="gameDep1" style="display: block;">
				<!-- <div class="tblGame" onclick="">             
	                <div class="headerGame"></div>
	                <div class="infoGame">
	                    <div class="tbl">
	                    	<div class="info">5/8</div>
	                    </div>
	                </div>
                </div> -->
			</div>
			<div class="selectGame" id="gameDep2" style="display: none;"></div>
			<div class="selectGame" id="gameDep3" style="display: none;"></div>			
		</div>
		<div id="contentRight">
			<ul>
				<li class="options" onclick="clickCreateTbl()">Tạo bàn</li>
				<li class="options" onclick="clickFindTable()">Vào bàn</li>
				<li class="options" onclick="clickJoinTbl()">Chơi ngay</li>
				<li class="options" onclick="backLvl()">Quay lại</li>
			</ul>
			<div id="info">
				<div id="topInfo"></div>
				<div id="tblInfo">
					<div id="imageInfo"><div class="image"></div></div>
					<div id="nameInfo"></div>
					<div id="moneyInfo"></div>
				</div>
				<div id="botInfo"></div>
			</div>
		</div>
		<div class="clear"></div>
	</div>

<!-- FRAME 3 -->	
	<div id="wrapperPG" class="wrapper">
		<div id="tblGame">
			<div id="infoTbl"></div>
			<div id="table">
				<div id="btnStart">
					<input type="button" value="Sẵn sàng" id="btnStart" class="btn" onclick="a()"></input>
				</div>
				<!-- <div id="cardAll" class="card" onclick="clickAddCard()"></div>
				<div id="cardBot"></div>
				<div id="cardLeft" class="card"></div>
				<div id="cardTop" class="card"></div>
				<div id="cardRight" class="card"></div>
				<div id="gamerBot_gamble" class="gamble"></div>
				<div id="gamerLeft_gamble" class="gamble">
					<div onclick="clickTakeCard()" id="gambleLeft_1" class="card_gamble" style="background-image: url('image/s.png'); left: 0%; top: 0%; width: 35%; height: 100%; display: block; z-index: 1;">
						<span id="spanGambleL_1" class="spanNum" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);">2</span>
					</div>
				</div>
				<div id="gamerTop_gamble" class="gamble"></div>
				<div id="gamerRight_gamble" class="gamble"></div>
				<div id="downBot" class="downCard"></div>				
				<div id="downLeft" class="downCard"></div>
				<div id="downTop" class="downCard"></div>
				<div id="downRight" class="downCard"></div>
				<div class="timer" id="timerBot"></div>
				<div class="timer" id="timerLeft"></div>
				<div class="timer" id="timerTop"></div>
				<div class="timer" id="timerRight"></div> -->
			</div>
		</div>
		<div id="btnUlti">
			<input type="button" value="Quay lại" class="btn" id="back" onclick="leaveTbl()"></input>			
		</div>
		<table id="tblBtn" border='0'>
			<tr>
				<td class="cellL">
					<input type="button" value="Xếp bài" class="btn" id="sort" onclick="sortCard()"></input>
					<input type="button" value="Đánh bài" class="btn" id="gamble" onclick="setGamble()"></input>
				</td>
				<td class="cellR">					
					<input type="button" value="Hạ bài" class="btn" id="down" onclick="clickDownCard()"></input>
					<input type="button" value="Gửi bài" class="btn" id="attach" onclick=""></input>
				</td>
			</tr>
		</table>
	</div>
	
	<!-- POPUP -->
	<div id="popUpCreateTbl" class="popUp">
		<a class="popupClose" onclick="closePopUp(1)">x</a>
		<div class="divInputPopUp">
			<label for="tblName">Tên bàn:</label>&nbsp;
			<input type="text" name="tblN" id="tblName">
		</div>
		<table id="tblSelect" cellspacing='0'  border='0' cellpadding='0'>
			<tr>
				<td><input type="radio" name="createTbl" value="20" class="radio" id="20"></td>
				<td><label for="20" class="lblSelect">20 AG</label></td>
			</tr>
			<tr>
				<td><input type="radio" name="createTbl" value="50" class="radio" id="50"></td>
				<td><label for="50" class="lblSelect">50 AG</label></td>
			</tr>
			<tr>
				<td><input type="radio" name="createTbl" value="100" class="radio" id="100"></td>
				<td><label for="100" class="lblSelect">100 AG</label></td>
			</tr>
			<tr>
				<td><input type="radio" name="createTbl" value="200" class="radio" id="200"></td>
				<td><label for="200" class="lblSelect">200 AG</label></td>
			</tr>
		</table>
		<div class="divBtnPopUp">
			<input type="button" value="Ok" class="btnPU" onclick="createTbl()">
			<input type="button" value="Hủy bỏ" class="btnPU" onclick="closePopUp(1)">
		</div>	
	</div>
	
	<div id="popUpFindTbl" class="popUp">
		<a class="popupClose" onclick="closePopUp(2)">x</a>
		<div class="divInputPopUp">
			<label for="tblId">Số bàn:</label>&nbsp;
			<input type="text" name="tblI" id="tblId">
		</div>
		<div class="divBtnPopUp">
			<input type="button" value="Ok" class="btnPU" onclick="joinFindTbl()">
			<input type="button" value="Hủy bỏ" class="btnPU" onclick="closePopUp(2)">
		</div>	
	</div>
	
	<div id="popUpDownState" class="popUp">
		<a class="popupClose" onclick="closePopUp(3)">x</a>
		<table class="tblSelect" cellspacing='0'  border='0' cellpadding='0'>
			<tr>
				<td><input type="radio" name="state" value="auto" class="radio" id="sa"></td>
				<td><label for="sa" class="lblSelect">Hạ tự động</label></td>
			</tr>
			<tr>
				<td><input type="radio" name="state" value="manual" class="radio" id="sm"></td>
				<td><label for="sm" class="lblSelect">Hạ bằng tay</label></td>
			</tr>
		</table>
		<div class="divBtnPopUp">
			<input type="button" value="Ok" class="btnPU" onclick="autoDown()">
		</div>	
	</div>
</body>
</html>
